<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编程导航-你的编程助手</title>
    <link type="favicon" rel="shortcut icon" th:href="@{/img/pns.png}">
    <link rel="stylesheet" th:href="@{/css/main.css}">
    <!-- 引入Font Awesome图标 -->
    <link rel="stylesheet" th:href="@{/font-awesome/css/font-awesome.min.css}">
    <!-- 引入Jquery  -->
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <!-- 引入Layui.css -->
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <!-- 引入Layui.js -->
    <script th:src="@{/layui/layui.js}"></script>
    <script th:src="@{/js/vue.js}"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.zhimg.com/element-ui/lib/index.js"></script>
    <script th:src="@{/js/commen.js}"></script>
    <script th:src="@{/js/jquery.cookie.min.js}"></script>
    <script th:src="@{/js/index.js}"></script>
    <script th:src="@{/js/swiper-bundle.min.js}"></script>
    <link rel="stylesheet" th:href="@{/css/swiper-bundle.min.css}">
</head>

<body>
<div class="toolbar">
    <div class="layui-container">
        <div class="layui-row">
            <div class="toolbar-container-left layui-col-md4">
                <div class="toolbar-logo">
                    <img th:src="@{/img/logo.png}" title="网站首页">
                </div>
                <div class="toolbar-menus">
                    <ul>
                        <li><a th:href="@{/}" title="网站首页">首页</a></li>
                        <li><a th:href="@{/resources}" title="编程资源">资源</a></li>
                        <!--                        <li><a th:href="index.html" title="世界">世界</a></li>-->
                        <li><a th:href="@{rank}" title="全站热门内容">排行</a></li>
                    </ul>
                </div>
            </div>
            <div class="toolbar-container-middle layui-col-md4">
                <form action="search" method="POST" class="layui-form">
                    <input id="Search" type="text" name="key" required lay-verify="required" placeholder="请输入关键字搜索"
                           autocomplete="off" list="searchList" class="layui-input search-input">
                    <datalist id="searchList" class="search-datalist searchRank">

                    </datalist>
                    <button type="submit" class="layui-btn search" id="searchArticle">搜索</button>
                </form>
            </div>
            <div class="toolbar-container-right layui-col-md4">
                <ul class="layui-nav">
                    <li class="layui-nav-item create">
                        <a href=""><i class="el-icon-circle-plus"></i>&nbsp;创作</a>
                        <dl class="layui-nav-child">
                            <dd><a th:href="@{/article/write}" target="_blank"><i class="layui-icon layui-icon-edit"></i>&nbsp;写文章</a></dd>
                            <dd><a th:href="@{/resource/add}" target="_blank"><i class="el-icon-upload"></i>&nbsp;上传资源</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item message">
                        <a href=""><i class="layui-icon layui-icon-notice"></i>消息
                            <!--                            <span class="layui-badge">9</span>-->
                        </a>
                    </li>
                    <li class="layui-nav-item account">
                        <a href="">
                            <img th:src="@{/img/head.png}" class="layui-nav-img">
                            <span>我</span>
                        </a>
                        <dl class="layui-nav-child">
                            <dd><a th:href="@{/user/account/account}" target="_blank"><i class="fa fa-universal-access"
                                                                          aria-hidden="true"></i>&nbsp;账号管理</a></dd>
                            <dd><a th:href="@{/user/account/article}" target="_blank"><i class="fa fa-arrows-alt"></i>&nbsp;我的博客</a>
                            </dd>
                            <dd><a th:href="@{/user/account/res/}" target="_blank"><i class="fa fa-database"></i>&nbsp;我的分享</a></dd>
                            <dd><a th:href="@{/user/logout}"><i class="fa fa-sign-out"
                                                                aria-hidden="true"></i>&nbsp;退出</a></dd>
                        </dl>
                    </li>
                    <li class="LoginAndRegister">
                        <a th:href="@{/user/login}">登录</a>&nbsp;/&nbsp;<a th:href="@{/user/register}">注册</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="home layui-col-md12">
    <div class="layui-container">
        <div class="home-left layui-col-md9">
            <div class="layui-tab">
                <ul class="layui-tab-title">
                    <li>关注</li>
                    <li class="layui-this">推荐</li>
                    <li id="cpp">C/C++</li>
                    <li id="Java">Java</li>
                    <li id="Python">Python</li>
                    <li id="qianduan">前端</li>
                    <li id="database">数据库</li>
                    <li id="ai">人工智能</li>
                    <li id="os">系统/运维</li>
                    <li id="HarmonyOS">HarmonyOS</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item" title="你的关注">
                        <ul id="empty">
                            <el-empty description="暂时还没有关注的人呦"></el-empty>
                        </ul>
                        <script type="text/javascript">
                            new Vue({
                                el: '#empty',
                                data: function () {
                                    return {
                                        visible: false
                                    }
                                }
                            })
                        </script>
                    </div>
                    <div class="layui-tab-item layui-show">
                        <div class="articleList">
                            <ul id="tuijian">

                            </ul>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="articleList">
                            <ul id="CPPList"></ul>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="articleList">
                            <ul id="JavaList"></ul>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="articleList">
                            <ul id="PythonList"></ul>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="articleList">
                            <ul id="qianduanList"></ul>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="articleList">
                            <ul id="databaseList"></ul>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="articleList">
                            <ul id="aiList"></ul>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="articleList">
                            <ul id="osList"></ul>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="articleList">
                            <ul id="HarmonyOSList"></ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="home-right layui-col-md3">
            <div class="mark layui-col-md12">
                <div class="mark-title layui-col-md12">
                    <h3>积分排行</h3>
                    <a th:href="@{/rank}">更多<i class="layui-icon layui-icon-right"></i></a>
                </div>
                <div class="mark-list layui-col-md12">
                    <ul class="layui-col-md12 userRank">
                        <!--<li class="layui-col-md12">
                            <div class="mark-list-logo layui-col-md3">
                                <a href=""><img
                                        src="https://cdn.jsdelivr.net/gh/weiyuexin/weiyuexin.github.io@latest/images/avatar.jpg"
                                        alt=""></a>
                            </div>
                            <div class="mark-list-desc layui-col-md9">
                                <a href="">
                                    <div class="mark-list-desc-name layui-col-md12">韦月鑫</div>
                                </a>
                                <div class="mark-list-desc-score layui-col-md12">总积分：<span>11</span></div>
                            </div>
                        </li>-->
                    </ul>
                </div>
            </div>
            <div class="hot-article layui-col-md12">
                <div class="hot-title layui-col-md12">
                    <h3>热门文章</h3>
                    <a th:href="@{/rank}">更多<i class="layui-icon layui-icon-right"></i></a>
                </div>
                <div class="hot-list layui-col-md12">
                    <ul class="layui-col-md12 articleRank">

                    </ul>
                </div>
            </div>
            <div class="hot-article layui-col-md12">
                <div class="hot-title layui-col-md12">
                    <h3>热门编程资源</h3>
                    <a th:href="@{/rank}">更多<i class="layui-icon layui-icon-right"></i></a>
                </div>
                <div class="hot-list layui-col-md12">
                    <ul class="layui-col-md12 ResRank">

                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="footer layui-col-md12">
    Copyright © 2022 编程导航. All Rights Reserved MIT Licensed
</div>
<!--返回顶部按钮-->
<div class="toTop">
    <span id="toTopTitle">返回<br>顶部</span>
    <i class="layui-icon layui-icon-top"></i>
</div>
</body>

</html>